<template>
	<div class="body-layout">
		<!-- 详情 -->
		<div class="wx-detail vf-detail">
			<div class="top-header">
			<!-- 返回按钮 -->
				<a  class="header-left"></a>
				<!--<article class="header-middle">估价结果</article>-->
				<article class="header-right">
					<section class="header-right_icon">
						<!--<a href="#no">重新估价</a>-->
					</section>
				</article>
			</div>
			<div class="title" v-if="previewInfoFanl">{{previewInfoFanl.title}}</div>

			<div class="detail-tools">
				<span class="detail-tools_name" v-if="previewInfoFanl">{{previewInfoFanl.userNickName}}</span>
				<span class="detail-tools_time" v-if="previewInfoFanl">{{time}}</span>
			</div>
			<div class="detail-content"  v-if="previewInfoFanl">
				<div class="ql-editor preview-content" v-html="previewInfoFanl.content"></div>
			</div>
		</div>
	</div>
</template>

<script>
  import {mapState, mapActions} from 'vuex';
  import util from '@/lib/util';
	export default {
    name: 'wx',
    data() {
      return {
        view_id: '',
        previewInfoFanl: {},
        time: null
      }
    },
    computed: {
      ...mapState([
        'articleDetail' //当前文章对象
      ]),
    },
    watch: {
      'articleDetail'() {
        // 观察文章详情变化,切换到第一个选项

        this.view_id = this.$route.query.id || this.articleDetail.articleId
        if (this.view_id) {

          this.getPreviewDetail();
        }
      }
    },
    methods: {
      getPreviewDetail() {
        let param = {
          id: this.view_id
        }
        util.ajax.post(`/article/preview/detail`,{...param}).then((res) => {
          // 获取预览观点详情
          this.previewInfoFanl = res.data;
          this.time = util.formatTime(this.previewInfoFanl.createTime)
        });
      }
    },
    created() {
      // 数据没返回 不会调用

      this.view_id = this.$route.query.id || this.articleDetail.articleId
      if (this.view_id) {
        this.getPreviewDetail();
      }
    }
	}
</script>

<style scoped lang="scss">
  @import "@/assets/css/style.scss";
	.wx-detail {
    width: 92%;
    margin: 0 auto;
    .title {
    	padding-top: 62px;
        margin: 0px 0px 13px;
        font-size: 24px;
        color: #333333;
        line-height: 30px;
    }
    .detail-tools {
        margin-bottom: 36px;
        font-size: 16px;
        line-height: 20px;
        &_name {
            color: #5B6A92;
            margin-right: 10px;
        }
        &_time {
            color: #B3B3B3;
        }
    }
    .detail-content {
        padding-bottom: 60px;
        p {
            font-size: 15px;
            color: #333333;
            line-height: 20px;
        }
        .img-box {
            width: 100%;
            height: 212px;
            line-height: 212px;
            text-align: center;
            img {
                max-width: 100%;
                height: auto !important;
            }
        }
    }
}
</style>
